<template>
  <div class="right-component-edit">
    <div class="right-con">
      <right-select-animate v-if="selectAnimate.isActive"></right-select-animate>
      <right-select-event v-else-if="selectEvent.isActive"></right-select-event>
      <component v-else :is="currentView"></component>
    </div>
    <!-- <i v-if="siteAttrs.h5Type == H5_TYPE.canvas" class="jy-icon-preview1 open-shut-right" @click="onOpenShut"></i> -->
  </div>
</template>

<script setup lang="ts">
import { COMPONENT_TYPES, H5_TYPE } from '@/const/'
import { useWebComponentStore } from '@/store/web/component'
import { useWebPageStore } from '@/store/web/page'
import { useWebSiteStore } from '@/store/web/site'

const useWebComponent = useWebComponentStore()
const useWebPage = useWebPageStore()
const useWebSite = useWebSiteStore()

const selectAnimate = computed(() => {
  return useWebComponent.selectAnimate
})
const selectEvent = computed(() => {
  return useWebComponent.selectEvent
})
const siteAttrs = computed(() => {
  return useWebSite.attrs
})
const currentView = computed(() => {
  if(!useWebPage.currentPage) {
    return null
  }
  if(useWebComponent.currentComponentData) {
    switch(Number(useWebComponent.currentComponentData!.cid)) {
      case COMPONENT_TYPES.wb_text:
      return 'right-text';
      case COMPONENT_TYPES.wb_img:
      return 'right-img';
      case COMPONENT_TYPES.wb_svg_icon:
      return 'right-svg-icon';
      case COMPONENT_TYPES.wb_video:
      return 'right-video';
      case COMPONENT_TYPES.wb_audio:
      return 'right-audio';
      case COMPONENT_TYPES.wb_input:
      return 'right-input';
      case COMPONENT_TYPES.wb_btn:
      return 'right-btn';
      case COMPONENT_TYPES.wb_address:
      return 'right-address';
      case COMPONENT_TYPES.wb_upload:
      return 'right-upload';
      case COMPONENT_TYPES.wb_timer:
      return 'right-timer';
      case COMPONENT_TYPES.wb_menu:
      return 'right-menu';
      case COMPONENT_TYPES.wb_camera:
      return 'right-camera';
      case COMPONENT_TYPES.wb_turn_book:
      return 'right-turn-book';
      case COMPONENT_TYPES.wb_scroll_container:
      return 'right-scroll-container';
      case COMPONENT_TYPES.wb_moveable:
      return 'right-moveable';
      case COMPONENT_TYPES.wb_calendar:
      return 'right-calendar';
      case COMPONENT_TYPES.wb_bg:
      return 'right-bg';
      case COMPONENT_TYPES.wb_process:
      return 'right-process';
      case COMPONENT_TYPES.wb_radio:
      case COMPONENT_TYPES.wb_checkbox:
      return 'right-radio-checkbox';
      case COMPONENT_TYPES.wb_dropdown:
      return 'right-dropdown';
      case COMPONENT_TYPES.wb_switch:
      return 'right-switch';
      case COMPONENT_TYPES.wb_imgs:
      return 'right-imgs';
      case COMPONENT_TYPES.wb_slot_machine:
      return 'right-slot-machine';
      case COMPONENT_TYPES.group_component:
      return 'right-wb';
      case COMPONENT_TYPES.group_carousel:
      return 'right-group-carousel'
      case COMPONENT_TYPES.wb_common_list:
      return 'right-common-list';
      case COMPONENT_TYPES.wb_is_post_event:
      return 'right-is-post-event';

      case COMPONENT_TYPES.wb_mc:
      return 'right-mc';

      case COMPONENT_TYPES.wb_paper:
      return 'right-paper';
      case COMPONENT_TYPES.wb_pixis:
      return 'right-pixis';
      case COMPONENT_TYPES.wb_panorama:
      return 'right-panorama';
      case COMPONENT_TYPES.wb_threes:
      return 'right-threes';
      case COMPONENT_TYPES.wb_phasers:
      return 'right-phasers';

      default:
      return 'right-page';
    }
  } else {
    return 'right-page'
  }
})
</script>

<script lang="ts">
const components = {
  RightPage: defineAsyncComponent(() => import('@/views/right/right-page.vue')),
  RightSelectAnimate: defineAsyncComponent(() => import('@/views/right/right-select-animate.vue')),
  RightSelectEvent: defineAsyncComponent(() => import('@/views/right/right-select-event.vue')),
  
  RightText: defineAsyncComponent(() => import('@/views/right/comps/right-text.vue')),
  RightImg: defineAsyncComponent(() => import('@/views/right/comps/right-img.vue')),
  RightBg: defineAsyncComponent(() => import('@/views/right/comps/right-bg.vue')),
  RightWb: defineAsyncComponent(() => import('@/views/right/comps/right-wb.vue')),
  RightBtn: defineAsyncComponent(() => import('@/views/right/comps/right-btn.vue')),

  RightSvgIcon: defineAsyncComponent(() => import('@/views/right/comps/right-svg-icon.vue')),
  RightVideo: defineAsyncComponent(() => import('@/views/right/comps/right-video.vue')),
  RightAudio: defineAsyncComponent(() => import('@/views/right/comps/right-audio.vue')),

  RightAddress: defineAsyncComponent(() => import('@/views/right/comps/right-address.vue')),
  RightInput: defineAsyncComponent(() => import('@/views/right/comps/right-input.vue')),
  RightRadioCheckbox: defineAsyncComponent(() => import('@/views/right/comps/right-radio-checkbox.vue')),
  RightDropdown: defineAsyncComponent(() => import('@/views/right/comps/right-dropdown.vue')),
  RightUpload: defineAsyncComponent(() => import('@/views/right/comps/right-upload.vue')),

  RightImgs: defineAsyncComponent(() => import('@/views/right/comps/right-imgs.vue')),
  RightTimer: defineAsyncComponent(() => import('@/views/right/comps/right-timer.vue')),
  RightMenu: defineAsyncComponent(() => import('@/views/right/comps/right-menu.vue')),
  RightCamera: defineAsyncComponent(() => import('@/views/right/comps/right-camera.vue')),
  RightTurnBook: defineAsyncComponent(() => import('@/views/right/comps/right-turn-book.vue')),
  RightScrollContainer: defineAsyncComponent(() => import('@/views/right/comps/right-scroll-container.vue')),
  RightMoveable: defineAsyncComponent(() => import('@/views/right/comps/right-moveable.vue')),
  RightCalendar: defineAsyncComponent(() => import('@/views/right/comps/right-calendar.vue')),
  RightProcess: defineAsyncComponent(() => import('@/views/right/comps/right-process.vue')),
  RightSlotMachine: defineAsyncComponent(() => import('@/views/right/comps/right-slot-machine.vue')),
  RightCommonList: defineAsyncComponent(() => import('@/views/right/comps/right-common-list.vue')),
  RightGroupCarousel: defineAsyncComponent(() => import('@/views/right/comps/right-group-carousel.vue')),

  //global
  RightIsPostEvent: defineAsyncComponent(() => import('@/views/right/comps/right-is-post-event.vue')),
  //canvas createjs three phaser
  //createjs
  RightMc: defineAsyncComponent(() => import('@/views/right/canvas/right-mc.vue')),
  // paper
  RightPaper: defineAsyncComponent(() => import('@/views/right/canvas/right-paper.vue')),
  //pixi
  RightPixis: defineAsyncComponent(() => import('@/views/right/canvas/right-pixis.vue')),
  //three
  RightThrees: defineAsyncComponent(() => import('@/views/right/canvas/right-threes.vue')),
  RightPanorama: defineAsyncComponent(() => import('@/views/right/canvas/right-panorama.vue')),
  //phaser
  // RightPhasers: defineAsyncComponent(() => import('@/views/right/canvas/right-phasers.vue')),
}

export default {
  components,
}
</script>
